<template>
  <div>
    <login-top middleTop="注册bilibili">
      <div slot="right" @click="$router.push('/login')" style="font-size:3.889vw">切换去登录</div>
    </login-top>
    <login-text label="姓名" @inputChange="res => (model.name = res)" style="margin:4.167vw 0;" placeholder="请输入姓名" rule="^.{6,16}$" />
    <login-text label="账号" @inputChange="res => (model.username = res)" placeholder="请输入账号" rule="^.{6,16}$" />
    <login-text label="密码" @inputChange="res => (model.password = res)" placeholder="请输入密码" type="password" rule="^.{6,16}$" />
    <login-btn btntext="注册" @registerSubmit="registerSubmit"></login-btn>
  </div>
</template>

<script>
import LoginTop from '../components/common/LoginTop.vue'
import LoginText from '../components/common/LoginText.vue'
import LoginBtn from '../components/common/LoginBtn'
export default {
  data() {
    return {
      model: {
        name: '',
        username: '',
        password: ''
      }
    }
  },
  components: {
    LoginTop,
    LoginText,
    LoginBtn
  },
  methods: {
    async registerSubmit() {
      let rulg = /^.{6,16}$/
      if (rulg.test(this.model.name.trim()) && rulg.test(this.model.username.trim()) && rulg.test(this.model.password.trim())) {
        const res = await this.$http.post('/register', this.model)
        this.$msg.fail(res.data.msg)
        if (res.data.code !== 200) {
          return
        }
        sessionStorage.setItem('id', res.data.id)
        sessionStorage.setItem('token', res.data.objtoken)
        setTimeout(() => {
          this.$router.push('/userinfo')
        }, 1000)
        //跳转个人中心页
      } else {
        this.$msg.fail('格式不正确，请重新输入')
      }
    }
  }
}
</script>

<style lang="less"></style>
